<template>
  <w-vertical class="argument">
    <section>
      <h2>{{w.name}}</h2>
      <p v-html="w.remark"></p>
    </section>
    <w-vertical v-if="w.attrs">
      <h3>参数</h3>
      <ArgumentUL v-for="item in w.attrs" :attr="item"></ArgumentUL>
    </w-vertical>
    <w-vertical v-if="w.examples">
      <h3>范例</h3>
      <Example :w="w"></Example>
      <div>&nbsp;</div>
    </w-vertical>
    <div>&nbsp;</div>
  </w-vertical>
</template>

<script>
  import ArgumentUL from './ArgumentUL.vue'
  import Example from './Example.vue'

  export default {
    name: 'layout-argument',
    components: {
      ArgumentUL,
      Example
    },
    props: ['w'],
  }
</script>

<style>
  .argument h3 {
    font-size: 18px;
    padding: 2px 10px;
    border-left: 3px solid rgb(76, 150, 166);
    background: #f5f5f5;
  }
</style>
